((w, doc, tpl, tplReplace) => {
  class Tab {
    constructor(el, elData) {
      this.el = doc.querySelector(el);
      let data = doc.querySelector(elData);
      this.data = JSON.parse(data.getAttribute("data-id"));
      this.curIdx = 0;
    }
    init() {
      this.render();
      this.bindEvent();
    }
    render() {
      const oNav = doc.createElement("div");
      oNav.className = "tab-nav";
      const oPage = doc.createElement("div");
      oPage.className = "tab-page";
      const oFrag = doc.createDocumentFragment();
      this.data.forEach((v, i) => {
        oNav.innerHTML += tplReplace(tpl("tab"), {
          tab: v.tab,
          current: !i ? "current" : "",
        });
        oPage.innerHTML += tplReplace(tpl("page"), {
          page: v.page,
          active: !i ? "active" : "",
        });
      });
      oFrag.appendChild(oNav);
      oFrag.appendChild(oPage);
      this.el.appendChild(oFrag);
    }
    bindEvent() {
      this.oNavItems = doc.querySelectorAll(".nav-item");
      this.oPageItems = doc.querySelectorAll(".page-item");
      this.el.addEventListener("click", this.navClick.bind(this), false);
    }
    navClick(e) {
      const eve = e || window.evemt,
        tar = eve.target;
      if (tar.className.trim() === "nav-item") {
        this.oNavItems[this.curIdx].className = "nav-item";
        this.oPageItems[this.curIdx].className = "page-item";
        this.curIdx = [].indexOf.call(this.oNavItems, tar);
        console.log(this.curIdx);
        this.oNavItems[this.curIdx].className = "nav-item current";
        this.oPageItems[this.curIdx].className = "page-item active";
      }
    }
  }
  w.Tab = Tab;
})(window, document, tpl, tplReplace);
